<template>
  <el-dialog
    title="名片信息编辑"
    :visible.sync="dialogVisible"
    class="business-card-analysis"
    width="30%"
    :close-on-click-modal="false"
    :show-close="false"
    @close="handleClose"
  >
    <el-alert
      title="名片识别成功，您可以对识别出来的信息进行编辑修改！"
      type="success"
      style="margin-bottom: 10px;"
    />
    <el-form
      ref="form"
      :model="form"
      label-width="auto"
      label-position="left"
      :rules="rules"
    >
      <el-form-item label="邮箱" prop="email">
        <el-select v-if="info.email && info.email.length > 1" v-model="form.email" placeholder="请选择邮箱">
          <el-option v-for="(item, index) in info.email" :key="index" :label="item" :value="item" />
        </el-select>
        <el-input v-else v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>

      <el-form-item label="传真" prop="fax">
        <el-select v-if="info.fax && info.fax.length > 1" v-model="form.fax" placeholder="请选择传真">
          <el-option v-for="(item, index) in info.fax" :key="index" :label="item" :value="item" />
        </el-select>
        <el-input v-else v-model="form.fax" placeholder="请输入传真" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BusinessCardAnalysis',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      required: true,
      default: () => ({
        email: [],
        fax: []
      })
    }
  },
  data() {
    return {
      form: {
        email: '',
        fax: ''
      },
      rules: {
        email: [
          {
            validator: (rule, value, callback) => {
              const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
              if (!value) {
                callback()
              } else if (!regex.test(value)) {
                callback('请输入有效的邮箱地址')
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change']
          }
        ]
        // fax: [
        //   {
        //     validator: (rule, value, callback) => {
        //       const regex = /^\+?(\d{1,3})[- ]?(\d+[- ]?){1,2}\d{6,10}$/
        //       if (!value) {
        //         callback()
        //       } else if (!regex.test(value)) {
        //         callback('传真号码只能包含数字、横线')
        //       } else {
        //         callback()
        //       }
        //     },
        //     trigger: ['blur', 'change']
        //   }
        // ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      }
    }
  },
  watch: {
    dialogVisible(n) {
      if (n) {
        this.initFormData()
      }
    }
  },
  created() {

  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.form = {
        email: '',
        fax: ''
      }
    },

    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const formData = { ...this.form }
          this.$emit('confirm', formData)
          this.handleClose()
        }
      })
    },

    initFormData() {
      if (this.info.email && this.info.email.length) {
        this.form.email = this.info.email[0]
      }
      if (this.info.fax && this.info.fax.length) {
        this.form.fax = this.info.fax[0]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.business-card-analysis {
  padding: 20px;
}

::v-deep(.el-dialog__body) {
  padding: 0 20px;
}
</style>
